<template>
 <div class="apply_detail">
   <el-dialog
     title="退库明细"
     width="60%"
     top="10%"
     :visible.sync="dialogTableVisible"
     v-dialogDrag
     :close-on-click-modal="false"
     customClass="mes_dialog"
    v-loading="isLoading">
     <div class="dialog_header">
       <span>退库申请编码: {{ number}}</span>
       <span>退库状态: {{status}}</span>
     </div>
     <div class="tables_panel">
       <div class="table_panel table_container">
         <el-table
           :data="listData"
           max-height="440px"
           border
           style="width: 100%"
           class="table_dialog">
           <el-table-column
             prop="materialNumber"
             label="物料编码"
             align="center"
             show-overflow-tooltip>
           </el-table-column>
           <el-table-column
             prop="materialName"
             label="物料名称"
             show-overflow-tooltip>
           </el-table-column>
           <el-table-column
             prop="drawingNumber"
             label="图号"
             align="center"
             show-overflow-tooltip>
           </el-table-column>
           <el-table-column
             prop="turnoverNumber"
             label="周转码"
             show-overflow-tooltip>
           </el-table-column>
           <el-table-column
             prop="purchaseBatchNumber"
             label="采购批次号"
             show-overflow-tooltip>
           </el-table-column>
           <el-table-column
             prop="traceDemandLabel"
             label="追溯要求"
             align="center"
             width="120"
             show-overflow-tooltip>
           </el-table-column>
           <el-table-column
             prop="materialSerialNumber"
             label="序列号"
             show-overflow-tooltip>
           </el-table-column>
           <el-table-column
             prop="unit"
             label="单位"
             class="data_td"
             width="80"
             align="center"
             show-overflow-tooltip>
           </el-table-column>
           <el-table-column
             prop="quantity"
             label="退库数量"
             width="100"
             show-overflow-tooltip>
           </el-table-column>
         </el-table>
       </div>
     </div>
   </el-dialog>
 </div>
</template>

<script>
export default {
  name: 'ApplyDetail',
  data() {
    return {
      dialogTableVisible: false,
      id: '', // 当前id
      isLoading: false, // 加载loading
      number: '', // 入库申请编码
      status: '', // 入库状态
    }
  },
  computed: {
    // 列表数据
    listData() {
      return this.$store.state.materialReturn.materialDetail.list || []
    },
  },
  methods: {
    openDialog(val) {
      this.id = val.id
      this.number = val.number
      this.status = val.returnStatusLabel
      this.dialogTableVisible = true
      this.init()
    },
    // 获取详情列表
    init() {
      let postData = {
        pageNo: 1,
        pageSize: 200,
        query: {
          materialReturnId: this.id
        }
      }
      this.isLoading = true
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/materialreturninventory/materialReturnInventory/list',
        data: postData,
        module: 'materialReturn',
        state: 'materialDetail'
      }).catch(() => {
        this.$store.commit('clearReturnList', {})
      }).finally(() => {
        this.isLoading = false
      })
    }
  }
}
</script>

<style lang="less">
  .apply_detail{
    .dialog_header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 18px;
    }
  }
</style>
